import React, {useEffect, useRef} from 'react';
import ReactDOM from 'react-dom';
import G6 from '@antv/g6';

const Charts = ({data}) => {
  const ref = useRef(null);
  let graph = null;

  useEffect(() => {
    if (data.nodes) {
      init();
    }
  }, [data])

  const init = () => {
    const container = ReactDOM.findDOMNode(ref.current);
    const width = container.scrollWidth * 0.8;
    const height = 300;
    console.log(ReactDOM.unmountComponentAtNode(ref.current))
    graph = new G6.Graph({
      container,
      width,
      height,
      fitView: true,
      modes: {
        default: ['drag-canvas', 'drag-node'],
      },
      layout: {
        type: 'dagre',
        rankdir: 'LR',
        align: 'UL',
        controlPoints: true,
        nodesepFunc: () => 1,
        ranksepFunc: () => 1,
      },
      defaultNode: {
        size: [120, 20],
        type: 'rect',
        style: {
          lineWidth: 1,
          fill: '#C6E5FF',
        },
      },
      defaultEdge: {
        type: 'polyline',
        size: 1,
        color: '#e2e2e2',
        style: {
          endArrow: {
            path: 'M 0,0 L 8,4 L 8,-4 Z',
            fill: '#e2e2e2',
          },
          radius: 20,
        },
      },
    });
    graph.data(data);
    graph.render();
  }

  return <div ref={ref}/>;
}
export default Charts;